// pages/myselfLike/myselfLike.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    cards: [
      {
        id: 1,
        img: '/pages/myselfLike/pic/皮卡丘.png',
        name: '皮卡丘',
        desc: '电气鼠宝可梦，性格活泼，能释放强力电流。',
        bgColor: '#fffbe6',
        forms: [
          '/pages/myselfLike/image/皮卡丘.png',
          '/pages/myselfLike/image/雷丘.png',
          '/pages/myselfLike/image/阿尔宙斯.png'
        ]
      },
      {
        id: 2,
        img: '/pages/myselfLike/pic/妙蛙种子.png',
        name: '妙蛙种子',
        desc: '草/毒系宝可梦，背上有种子，能进行光合作用。',
        bgColor: '#e6fff7',
        forms: [
          '/pages/myselfLike/image/妙蛙种子.png',
          '/pages/myselfLike/image/妙蛙草.png',
          '/pages/myselfLike/image/妙蛙花.png'
        ]
      },
      {
        id: 3,
        img: '/pages/myselfLike/pic/小火龙.png',
        name: '小火龙',
        desc: '火系宝可梦，尾巴上的火焰代表生命力。',
        bgColor: '#ffe6e6',
        forms: [
          '/pages/myselfLike/image/小火龙.png',
          '/pages/myselfLike/image/火恐龙.png',
          '/pages/myselfLike/image/喷火龙.png'
        ]
      },
      {
        id: 4,
        img: '/pages/myselfLike/pic/杰尼龟.png',
        name: '杰尼龟',
        desc: '水系宝可梦，遇到危险会缩进壳里。',
        bgColor: '#e6f0ff',
        forms: [
          '/pages/myselfLike/image/杰尼龟.png',
          '/pages/myselfLike/image/卡咪龟.png',
          '/pages/myselfLike/image/水箭龟.png'
        ]
      },
      {
        id: 5,
        img: '/pages/myselfLike/pic/卡比兽.png',
        name: '卡比兽',
        desc: '睡觉大师，拥有超强的体力和耐力。',
        bgColor: '#f5e6ff',
        forms: [
          '/pages/myselfLike/image/卡比兽.png',
          '/pages/myselfLike/image/卡比兽2.png',
          '/pages/myselfLike/image/卡比兽3.png'
        ]
      },
      {
        id: 6,
        img: '/pages/myselfLike/pic/耿鬼.png',
        name: '耿鬼',
        desc: '幽灵/毒系宝可梦，喜欢恶作剧。',
        bgColor: '#e6e6ff',
        forms: [
          '/pages/myselfLike/image/耿鬼.png',
          '/pages/myselfLike/image/耿鬼2.png',
          '/pages/myselfLike/image/耿鬼3.png'
        ]
      },
      {
        id: 7,
        img: '/pages/myselfLike/pic/波比克.png',
        name: '波比克',
        desc: '可爱又调皮的小精灵。',
        bgColor: '#e6fff6',
        forms: [
          '/pages/myselfLike/image/波比克.png',
          '/pages/myselfLike/image/波比克2.png',
          '/pages/myselfLike/image/波比克3.png'
        ]
      },
      {
        id: 8,
        img: '/pages/myselfLike/pic/伊布.png',
        name: '伊布',
        desc: '进化多样的宝可梦，性格温顺。',
        bgColor: '#fff6e6',
        forms: [
          '/pages/myselfLike/image/伊布.png',
          '/pages/myselfLike/image/伊布2.png',
          '/pages/myselfLike/image/伊布3.png'
        ]
      },
      {
        id: 9,
        img: '/pages/myselfLike/pic/六尾.png',
        name: '六尾',
        desc: '拥有六条尾巴的火系宝可梦。',
        bgColor: '#ffe6b6',
        forms: [
          '/pages/myselfLike/image/六尾.png',
          '/pages/myselfLike/image/六尾2.png',
          '/pages/myselfLike/image/六尾3.png'
        ]
      },
      {
        id: 10,
        img: '/pages/myselfLike/pic/胖丁.png',
        name: '胖丁',
        desc: '用歌声让人入睡的可爱宝可梦。',
        bgColor: '#ffe6fa',
        forms: [
          '/pages/myselfLike/image/胖丁.png',
          '/pages/myselfLike/image/胖丁2.png',
          '/pages/myselfLike/image/胖丁3.png'
        ]
      }
    ],
    cardsShow: [],
    showPopup: false,
    selectedCard: null
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    // 读取本地收藏的卡牌
    const likedCards = wx.getStorageSync('likedCards') || [];
    const likedIds = likedCards.map(card => card.id);
    // 只展示被收藏的宝可梦，兼容低版本小程序
    const allCards = this.data.cards;
    const showCards = allCards.filter(card => likedIds.indexOf(card.id) !== -1);
    this.setData({ cardsShow: showCards });
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  },
  showPopup: function(event) {
    const selectedCard = event.currentTarget.dataset.card;
    this.setData({
      selectedCard: selectedCard,
      showPopup: true
    });
  },

  closePopup: function() {
    this.setData({
      showPopup: false
    });
  },

  cancelLike: function() {
    const card = this.data.selectedCard;
    // 读取本地收藏
    let likedCards = wx.getStorageSync('likedCards') || [];
    // 移除当前卡牌
    likedCards = likedCards.filter(item => item.id !== card.id);
    wx.setStorageSync('likedCards', likedCards);
    // 关闭弹窗
    this.setData({ showPopup: false });
    // 刷新cardsShow
    const likedIds = likedCards.map(item => item.id);
    const allCards = this.data.cards;
    const showCards = allCards.filter(item => likedIds.indexOf(item.id) !== -1);
    this.setData({ cardsShow: showCards });
  }
})